<template>
  <div class="zh-tabs">
    <div class="zh-tabs_warp">
      <div class="zh-tabs_nav">
        <div class="zh-tab" ref="tabs" v-for="item in navList" :key="item.active" :class="{ 'isActive': item.active === active }" @click="tabsClick(item,$event)" >
          <span>{{ item.name }}</span>
          <span style="margin-left:5px">{{ item.num }}</span>
        </div>
        <div class="zh-tab__line" :style="lineStyle"></div>
      </div>
    </div>
    <div class="zh-tabs_content">
      <div v-if="active === 1" class="zh-transpond">
        <div class="zh-transpond-box" v-for="item in 7" :key="item">
          <div class="l" :style="{'background-image': 'url(' + jcImg + ')'}"></div>
          <div class="r">
            <div class="t">
              <span>Joeh Han</span>
              <i class="iconfont icon-vip"></i>
            </div>
            <div class="c">转发该解密时刻</div>
            <div class="b">5-25 15:24</div>
          </div>
        </div>
      </div>
      <div v-else-if="active === 2" class="zh-comment">
        <div class="zh-transpond-box" v-for="item in 4" :key="item">
          <div class="l" :style="{'background-image': 'url(' + jcImg + ')'}"></div>
          <div class="r" :id="`css${item}`">
            <div class="t">
              <span>Julius Wang -</span>
              <i class="iconfont icon-vip"></i>
            </div>
            <div class="c">不看不知道一看下一跳,这里这么好玩看不知道一看下一跳,这里这么好玩的吗</div>
            <div class="b">
              <div class="data">5-25 15:24</div>
              <div class="btn">
                <i class="iconfont icon-pengyouquan"></i>
                <i class="iconfont icon-laba"></i>
                <i class="iconfont icon-zanpress" :style="[ zanpress !=='' ? 'color:red' : '' ]" @click="handlezanpress(item)"></i>
                <span>{{ zanpress }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="active === 4" class="zh-like">点赞</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lineStyle: '',
      active: 1,
      zanpress: '',
      navList: [
        { name: '转发', active: 1, num: 201 },
        { name: '评论', active: 2, num: 339 },
        { name: '', active: 3, num: '', isChange: true },
        { name: '赞', active: 4, num: 4210 }
      ],
      jcImg: localStorage.getItem('txImage') || require('@/assets/image/photo.jpg')
    }
  },
  mounted () {
    this.lineStyle = `transform:translateX(${1 * this.$refs.tabs[0].offsetWidth - this.$refs.tabs[0].offsetWidth / 2 + 'px'}) translateX(-50%)`
  },
  methods: {
    tabsClick (item, e) {
      if (item.isChange) return false
      this.lineStyle = `transform:translateX(${item.active * e.currentTarget.offsetWidth - e.currentTarget.offsetWidth / 2 + 'px'}) translateX(-50%)`
      this.active = item.active
    },
    handlezanpress (item) {
      const likeDom = document.createElement('div')
      this.zanpress++
      likeDom.className = this.zanpress % 2 === 0 ? 'like' : 'like like--is-second'
      likeDom.style.willChange = 'margin-top'
      document.getElementById(`css${item}`).appendChild(likeDom)
      setTimeout(() => {
        document.getElementById(`css${item}`).removeChild(likeDom)
      }, 3000)
    }
  }
}
</script>

<style lang="less" scoped >
  .zh-tabs {
    background-color: #fff;
    .zh-tabs_warp {
      height: 44px;
      .zh-tabs_nav {
        height: 100%;
        display: flex;
        background: #fff;
        position: relative;
        .zh-tab {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 20px;
          font-size: 14px;
          border-bottom: 1px solid #eee;
        }
        .zh-tab__line {
          position: absolute;
          bottom: 5px;
          left: 0;
          z-index: 1;
          width: 30px;
          height: 3px;
          background: #ee0a24;
          border-radius: 5px;
          transition-duration: 0.3s;
          transform: translateX(-50%);
        }
        .isActive {
          font-weight: 500;
          color: #323233;
        }
      }
    }
    .zh-tabs_content {
      margin-top: 20px;
      min-height: 500px;
      padding-left: 20px;
      .zh-transpond,.zh-comment {
        .zh-transpond-box {
          display: flex;
          margin-bottom: 10px;
          .l {
            width: 43px;
            height: 43px;
            border-radius: 100%;
            background-position: center !important;
            background-size: cover !important;
          }
          .r {
            position: relative;
            flex: 1;
            margin-left: 10px;
            border-bottom: 1px solid #eee;
            .t {
              font-size: 12px;
              color: #c9ced7;
              display: flex;
              align-content: flex-start;
              .iconfont { color: #ee0a24; margin-left: 5px; }
            }
            .c { font-size: 14px; color: #323233; margin-bottom: 8px; padding-right: 10px; }
            .b {
              font-size: 12px;
              color: #c9ced7;
              margin-bottom: 5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .btn {
                padding-right: 15px;
                .iconfont {
                  margin-left: 10px;
                }
                span {
                  margin-left: 3px;
                }
              }

            }
          }
        }
      }
    }
  }
</style>
